<template>
	<view class="bottom  w100 posf">

		<!-- 文字输入框 -->
		<div class="bfff send-box " v-if="type=='text'">
			<div class="flex-start mb20 mt15 ml10" v-if="imgUrl">
				<div class="img-box posr">
					<image :src="imgUrl" mode="aspectFill" class="choose-img"></image>
					<image src="../../static/close.png" class="close-icon posa" mode="widthFix" @click="imgUrl=''">
					</image>
				</div>
			</div>

			<div class="flex-start">
				<image src="../../static/语音@2x.png" mode="widthFix" class="voice-icon mr14"
					@click="onSwitchType('audio')">
				</image>
				<!-- 	<input type="text" placeholder="请输入想要了解的问题" confirm-type="send" placeholder-class="c999" class="mr14 flex1"
					v-model="text" @confirm="send" /> -->
				<textarea placeholder="请输入想要了解的问题" confirm-type="send" :show-confirm-bar="false" auto-height="true"
					placeholder-class="c999" class="mr14 flex1" :cursor-spacing="22" v-model="text" @confirm="send" />
				<image src="../../static/index/添加@2x.png" mode="widthFix" class="add-icon mr22" @click="show=true">
				</image>
				<image src="../../static/发送@2x.png" v-if="text||imgUrl" mode="widthFix" class="send-icon" @click="send">
				</image>
				<image src="../../static/index/发送@2x.png" v-else mode="widthFix" class="send-icon"></image>
			</div>

		</div>
		<!-- 录音输入框 -->
		<div class="bfff send-box flex-start" v-else>
			<image src="../../static/键盘.png" mode="widthFix" class="voice-icon mr14" @click="onSwitchType('text')">
			</image>
			<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'">
				<view :class="longPress == '1' ? 'record-box' : 'record-box1'">
					<view class="record-btn-layer">
						<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"
							:style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'':''" @longtap="longpressBtn"
							@touchend="touchendBtn()" @touchmove="handleTouchMove" @touchstart="longpressBtn">
							{{VoiceText}}
						</button>
					</view>
					<!-- 语音音阶动画 -->
					<view
						:class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'"
						v-if="longPress == '2'">
						<view class="prompt-loader">
							<view class="em" v-for="(item,index) in 15" :key="index"></view>
						</view>
						<text class="span">{{VoiceTitle}}</text>
					</view>
				</view>
			</view>
			<image src="../../static/index/发送@2x.png" mode="widthFix" class="send-icon ml14"></image>
		</div>
		<!-- 选择文件弹出层 -->
		<up-popup :show="show" mode="bottom" :round="25" @close="show=false">
			<div class="file-box flex-start">
				<div class="colum mr65" @click="chooseImg">
					<image src="../../static/file1.png" mode="widthFix"></image>
					<div class="f28 mt25">图片</div>
				</div>
				<!-- <div class="colum mr65">
					<image src="../../static/file2.png" mode="widthFix"></image>
					<div class="f28 mt25">视频</div>
				</div>
				<div class="colum">
					<image src="../../static/file3.png" mode="widthFix"></image>
					<div class="f28 mt25">文件</div>
				</div> -->
			</div>
		</up-popup>
	</view>
</template>
<script>
	// #ifdef MP
	let plugin = requirePlugin("WechatSI")
	// #endif
	import {
		baseUrl
	} from '../../utils/config.js'

	let token = ''
	let userInfo = uni.getStorageSync('userinfo')

	let init // 录制时长计时器
	let timer // 播放 录制倒计时
	let manager
	export default {
		data() {
			return {
				longPress: '1', // 1显示 按住 说话 2显示 说话中
				delShow: false, // 删除提示框显示隐藏
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				VoiceTitle: '松手结束录音',
				VoiceText: '按住 说话',
				type: 'text',
				text: '',
				// 文件选择
				show: false,
				imgUrl: ''
			}
		},

		created: function() {
			this.initWechatSI()

		},
		methods: {
			onSwitchType(type) {
				this.type = type
				if (type === 'audio') {
					this.text = ''
				}
			},
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						let userInfo = uni.getStorageSync('userinfo')
						token = userInfo ? `${userInfo.jwt.token_type} ${userInfo.jwt.access_token}` : ''

						// that.imgUrl = res.tempFilePaths[0]
						uni.uploadFile({
							url: `${baseUrl}/ooh-resource/oss/endpoint/put-file`,
							header: {
								'content-type': 'multipart/form-data',
								'ooh-auth': token
							},
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							success: (uploadFileRes) => {
								if (uploadFileRes.data) {
									const resJson = JSON.parse(uploadFileRes.data)
									if (resJson.success) {
										that.imgUrl = resJson.data.link
										that.text = '广告发布素材审核 '
									} else {
										uni.showToast({
											title: '图像上传失败',
											icon: 'error'
										})
									}

								}
							}
						})

						that.show = false
					}
				})
			},
			// 长按录音事件
			longpressBtn(e) {
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				this.longPress = '2';
				this.VoiceText = '说话中...';
				this.sendLock = false;
				this.start()
			},
			// 长按松开录音事件
			touchendBtn() {
				this.longPress = '1';
				this.VoiceText = '按住 说话';
				this.VoiceTitle = '松手结束录音'
				if (!this.sendLock) {
					this.stop()
				}
			},
			// 删除录音
			handleTouchMove(e) {
				//touchmove时触发
				var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 70) {
					this.VoiceTitle = "松开手指,取消发送";
					this.VoiceText = '松开手指,取消发送';
					this.delBtn()
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					this.VoiceTitle = "松手结束录音";
					this.VoiceText = '松手结束录音';
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},
			delBtn() {
				this.delShow = false;
				this.time = 0
				// this.VoiceTitle = '松手结束录音'
			},
			send() {
				this.$emit('send', this.text, this.imgUrl)
				this.text = ''
				this.imgUrl = ''
			},
			start() {
				manager.start({
					duration: 30000,
					lang: "zh_CN"
				})
			},
			// 结束录音
			stop() {
				manager.stop()
			},
			// 语音转文字部分
			initWechatSI() {
				let that = this
				manager = plugin.getRecordRecognitionManager()
				manager.onRecognize = function(res) {
					// console.log("current result", res.result)
				}
				manager.onStop = function(res) {
					// console.log("record file path", res.tempFilePath)
					// console.log("result", res.result)
					that.text = res.result
					that.type = 'text'
				}
				manager.onStart = function(res) {
					// console.log("成功开始录音识别", res)
				}
				manager.onError = function(res) {
					// console.error("error msg", res.msg)
				}
			}


		}
	}
</script>


<style lang="scss" scoped>
	.choose-img {
		width: 118rpx;
		height: 118rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.close-icon {
		width: 30rpx;
		height: 30rpx;
		top: 8rpx;
		right: 6rpx;
	}

	.file-box {
		width: 750rpx;
		height: 314rpx;
		background: #F5F5F5;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		padding: 0 62rpx;

		image {
			width: 109rpx;
			height: 109rpx;
		}
	}

	/* 语音录制开始--------------------------------------------------------------------- */
	.record-layer {
		flex: 1;
	}

	.record-layer1 {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, .6);
		z-index: 10;
		bottom: 0vh;
		left: 0;
	}

	.record-box {
		width: 100%;
		position: relative;
	}

	.record-box1 {
		width: 100%;
		position: relative;
		bottom: -83vh;
		height: 17vh;
	}

	.record-btn-layer {
		width: 100%;
	}

	.record-btn-layer button::after {
		border: none;
		transition: all 0.1s;
	}

	.record-btn-layer button {
		font-size: 14px;
		line-height: 50px;
		width: 100%;
		height: 50px;
		border-radius: 8px;
		text-align: center;
		background: #fff;
		transition: all 0.1s;
	}

	.record-btn-layer button image {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		vertical-align: middle;
		transition: all 0.3s;
	}

	.record-btn-layer .record-btn-1 {
		width: 510rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 1rpx solid #333333;
	}

	.record-btn-layer .record-btn-2 {
		border-radius: 26rpx 26rpx 0 0;
		height: 467rpx;
		line-height: 275rpx;
		transition: all 0.3s;
		font-size: 30rpx;
	}

	/* 提示小弹窗 */
	.prompt-layer {
		border-radius: 15px;
		background: linear-gradient(to right, #FF9C46, #F26124);
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #FF9C46;
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	//取消动画
	.prompt-layer1 {
		border-radius: 15px;
		background: #FB5353;
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		height: 11vh;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer1::after {
		content: '';
		display: block;
		border: 12px solid rgba(0, 0, 0, 0);
		border-radius: 10rpx;
		border-top-color: #FB5353;
		position: absolute;
		bottom: -46rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s;
	}

	.prompt-layer-1 {
		font-size: 12px;
		width: 150px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -400rpx;
	}

	.prompt-layer-1 .p {
		color: #fff;
	}

	.prompt-layer-1 .span {
		color: #fff;
	}

	.prompt-loader .em {}

	/* 语音音阶------------- */
	.prompt-loader {
		width: 96px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.prompt-loader .em {
		display: block;
		background: #fff;
		width: 1px;
		height: 10%;
		margin-right: 2.5px;
		float: left;
	}

	.prompt-loader .em:last-child {
		margin-right: 0px;
	}

	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}

	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}

	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}

	@keyframes load {
		0% {
			height: 10%;
		}

		50% {
			height: 100%;
		}

		100% {
			height: 10%;
		}
	}

	/* 语音音阶-------------------- */
	.prompt-layer-2 {
		top: -40px;
	}

	.prompt-layer-2 .text {
		color: #fff;
		font-size: 12px;
	}


	.bottom {
		bottom: 0;
		left: 0;
		padding: 18rpx 18rpx 30rpx;

		.send-box {
			width: 710rpx;
			min-height: 106rpx;
			padding: 18rpx 28rpx;
			border-radius: 54rpx;
			box-shadow: 3rpx 0rpx 21rpx 0rpx rgba(198, 198, 198, .4);

			.voice-icon {
				width: 54rpx;
				height: 54rpx;
			}

			.flex1 {
				padding: 0 20rpx;
			}

			.add-icon {
				width: 54rpx;
				height: 54rpx;
			}

			.send-icon {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
</style>